<!-- 列表分类-关联设置 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="关联设置" name="1">
            <layout-pane label="关联">
                <si-select
                    v-model="refreshObject"
                    :list="bindList"
                />
            </layout-pane>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import { useEditStore } from '@/store'
import LayoutPane from '@/components/setting-pane/layout-pane'
import { SiSelect } from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'NewClassifyBind',
    components: {
        LayoutPane,
        SiSelect
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const editStore = useEditStore()
        
        const widgetList = computed(() => editStore.widgetList)

        const refreshObject = computed({
            get: () => widget.value.widgetData.eles.customFeature.refreshObject,
            set: val => widget.value.widgetData.eles.customFeature.refreshObject = val
        })

        const bindList = computed(
            () => widgetList.value.filter(item => {
                return ['topic', 'franchisee-list', 'group-buy-list'].includes(item.eles.type)
            }).map(item => ({
                label: item.eles.customFeature.name || item.component.title,
                value: item.eles.customFeature.id
            }))
        )

        return {
            widget,
            refreshObject,
            bindList
        }
    }
})
</script>